<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-11 15:26:59
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-10-08 14:37:56
 * @FilePath: \jzjypc4.0\src\views\PersonalCenter\PersonalMsg\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 个人中心/我的活动 -->
  <div id="container">
    <div class="content">
      <div class="top">
        <span></span>
        <h3>我的活动</h3>
      </div>
      <div class="box">
        <div class="taps">
          <div
            class="computer"
            :class="{ choseTap: tapRadio == 1 }"
            @click="choseJy"
          >
            <h3>教研活动</h3>
            <span></span>
          </div>
          <div
            class="wechat1"
            :class="{ choseTap: tapRadio == 2 }"
            @click="choseJx"
            v-if="jxshow"
          >
            <h3>教学活动</h3>
            <span></span>
          </div>
          <div class="search">
            <input type="text" v-model="value" placeholder="请输入关键词搜索" @keyup.enter="search"/>
            <i class="el-icon-search"></i>
          </div>
        </div>
        <div class="activeLists">
          <div
            class="activeBox"
            v-for="item in activeList"
            :key="item.id"
            @click="goActiveDetails(item.id)"
          >
            <img :src="item.file_url" alt="" />
            <h3>{{ item.title }}</h3>
            <span
              >{{ timeStamp2String(item.start_time * 1000, 1) }}（{{
                timeStamp2String(item.start_time * 1000, 11)
              }}）{{ timeStamp2String(item.start_time * 1000, 5) }}</span
            >
          </div>
        </div>
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="教研活动" name="1">
              <div class="activeBox" v-for="item in 5" :key="item">
                <img src="../../../assets/img/images/index_class.png" alt="" />
                <h3>高一语文《红楼梦》与《乡土中国》在线协同 教研</h3>
                <span>2022-05-05 (星期六) 12：00</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="教学活动" name="2"></el-tab-pane>
          </el-tabs> -->
        <div class="page1" v-if="!nothingShow">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-sizes="[4,6]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="retCounts"
          >
          </el-pagination>
        </div>
        <div class="nothing" v-if="nothingShow">
          <img src="../../../assets/img/nothing.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { timeStamp2String } from "../../../utils/time";
import { activitylists_my } from "../../../api/http";
export default {
  name: "changeClass",
  components: {},
  data() {
    return {
      timeStamp2String,
      activeList: [], //我的活动列表
      currentPage: 1,
      tapRadio: 1, //当前tap值
      jyjxtype_id: 401, //教研或者教学
      page: 1, //页数
      page_size: 4, //每页数
      retCounts: 0, //总数据数
      nothingShow: false, //空图的显示隐藏
      value:'',//搜索内容
      jxshow:false,
    };
  },
  created() {
    //获取我的活动列表数据
    activitylists_my({
      md5key: localStorage.getItem("md5key"),
      jyjxtype_id: 401, //进入或刷新页面默认教研活动数据
      page: this.page,
      page_size: this.page_size,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "我的活动数据");
        this.activeList = res.retRes;
        this.retCounts = res.retCounts;
        console.log(res.retRes.length);
        if (res.retRes.length == 0) {
          this.nothingShow = true;
        } else {
          this.nothingShow = false;
        }
      }
    });
    activitylists_my({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: 402,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "我的活动数据");
          if (res.retRes.length != 0) {
            this.jxshow = true;
          } else {
            this.jxshow = false;
          }
        }
      });
  },
  methods: {
    //切换至教研活动
    choseJy() {
      this.tapRadio = 1;
      this.jyjxtype_id = 401;
      this.value = ''
      //获取我的活动列表数据
      activitylists_my({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: this.jyjxtype_id,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "我的活动数据");
          this.activeList = res.retRes;
          if (res.retRes.length == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    //切换至教学活动
    choseJx() {
      this.tapRadio = 2;
      this.jyjxtype_id = 402;
      this.value = ''
      //获取我的活动列表数据
      activitylists_my({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: this.jyjxtype_id,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "我的活动数据");
          this.activeList = res.retRes;
          if (res.retRes.length == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    //去活动详情
    goActiveDetails(id) {
      let { href } = this.$router.resolve({
        path: "/active/activeDetails",
        query: {
          id: id,
        },
      });
      window.open(href, "activeRes");
    },
    //搜索内容
    search(){
      console.log(this.value)
      activitylists_my({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: this.jyjxtype_id,
        title:this.value.trim(),
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "我的活动数据");
          this.activeList = res.retRes;
          if (res.retRes.length == 0) {
            this.nothingShow = true;
          } else {
            this.nothingShow = false;
          }
        }
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page_size = val;
      //获取我的活动列表数据
      activitylists_my({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: this.jyjxtype_id,
        title:this.value.trim(),
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "我的活动数据");
          this.activeList = res.retRes;
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      //获取我的活动列表数据
      activitylists_my({
        md5key: localStorage.getItem("md5key"),
        jyjxtype_id: this.jyjxtype_id,
        title:this.value.trim(),
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "我的活动数据");
          this.activeList = res.retRes;
        }
      });
    },
  },
};
</script>
<style>
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 740px;
  margin: 0 auto;
  margin-top: 40px;
}
.el-pagination {
  text-align: center;
  /* margin: 20px 80px 20px 0; */
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
</style>
<style lang="less" scoped>
#container {
  .content {
    .nothing {
      margin-top: 100px;
      text-align: center;
      img {
        // width: 400px;
      }
    }
    .top {
      display: flex;
      margin: 30px 0px 40px 30px;
      span {
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px;
        width: 3px;
        height: 20px;
        background: #08a579;
        border-radius: 2px;
      }
      h3 {
        font-size: 20px;
      }
    }
    .box {
      margin-left: 0px;
      .taps {
        position: relative;
        display: flex;
        align-items: center;
        margin-left: 30px;
        height: 38px;
        border-bottom: 1px solid #e6e6e6;
        overflow: hidden;
        .computer {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 30px 0px 20px;
          cursor: pointer;
          h3 {
            padding-bottom: 10px;
            color: #939599;
            font-size: 14px;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
            border-radius: 10px;
          }
        }
        .wechat1 {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          h3 {
            padding-bottom: 10px;
            color: #939599;
            font-size: 14px;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
            border-radius: 10px;
          }
        }
        //活动样式
        .choseTap {
          h3 {
            font-size: 16px;
            color: #333;
          }
          span {
            background: #08a579;
          }
        }
        .search {
          position: relative;
          position: absolute;
          top: 0px;
          right: 30px;
          input {
            padding-left: 30px;
            width: 170px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #c4c7cc;
            border-radius: 16px;
            outline: none;
          }
          i {
            position: absolute;
            top: 7px;
            left: 10px;
            font-size: 18px;
            color: #c4c7cc;
          }
        }
      }
      .activeLists {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        .activeBox {
          display: flex;
          flex-direction: column;
          margin-left: 40px;
          margin-bottom: 40px;
          cursor: pointer;
          img {
            margin-bottom: 10px;
            width: 360px;
            height: 186px;
            border-radius: 10px;
            background-color: #e4e4e4;
          }
          h3 {
            margin-bottom: 20px;
            width: 320px;
            height: 34px;
            font-size: 16px;
            font-weight: normal;
          }
          span {
            font-size: 14px;
            color: #939599;
          }
        }
        .activeBox:hover {
          h3 {
            color: #08a579;
          }
        }
      }

      .page1 {
        width: 700px;
        margin: 0 auto;
      }
      .el-pagination {
        text-align: center;
        margin: 20px 80px 20px 0;
      }
    }
  }
}
</style>